<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.form.operate! == 'statics'"
        @close="baTable.toggleForm"
        width="50%"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.items!.name }} - 生产统计
            </div>
        </template>
        <div>
            <table>
                <tr>
                    <th v-for="val,key in statics">{{ key }}</th>
                </tr>
                <tr>
                    <td v-for="val,key in statics">{{ val }}</td>
                </tr>
            </table>
        </div>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm()">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { inject, onMounted, reactive, ref, watch } from 'vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { staffOverview } from '/@/api/backend'

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

let statics = reactive({})

watch(() => {
    return baTable.form.items!
},(val) => {
    getStaffOverview()
})

onMounted(() => {
    const months = getNearMonth()
    months.forEach((month) => {
        statics[month] = 0
    })
})

const getNearMonth = () => {
    let dateArr = []
    let date = new Date()
    // let year = date.getFullYear()
    date.setMonth(date.getMonth() + 1, 1) // 设置到下个月
    for (let i = 0; i < 12; i++) {
        date.setMonth(date.getMonth() - 1)//每次循环一次 月份值减1
        let m = date.getMonth() + 1
        m = m < 10 ? "0" + m : m
        dateArr.push(date.getFullYear() + "-" + m)
    }
    dateArr.reverse()
    return dateArr
}

const getStaffOverview = () => {
    staffOverview({'staff_id': baTable.form.items!.id}).then((res: any) => {
        let datas = {}
        res.data.forEach((item: any) => {
            statics[item.month_full] = item.count
        })
    })
}

</script>

<style scoped lang="scss">
    table {
        border-collapse: collapse;
        width: 100%;
        margin: 20px 0;
        th {background-color: #eaeaea; padding: 10px;border: 1px solid #ddd;}
        td {padding: 10px;border: 1px solid #ddd; text-align: center;}
    }
</style>
